<template>
  <div class="company-search" style="width: 100%; padding: 10px; background-color: #f5f7fa;">
    <!-- 搜索栏 -->
    <div style="margin: 10px 0; display: flex; align-items: center;">
      <el-input
          clearable
          v-model="search.name"
          placeholder="请输入企业名称"
          style="width: 20%; margin-right: 10px"
          @keyup.enter="load"
      ></el-input>
      <el-input
          clearable
          v-model="search.phone"
          placeholder="请输入统一信用代码"
          style="width: 20%; margin-right: 10px"
          @keyup.enter="load"
      ></el-input>
      <el-button type="primary" @click="load">查询</el-button>
    </div>

    <!-- AI智能分析结果展现（缩小） -->
    <div
        style="margin-top: 10px; padding: 10px; background: white; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);"
    >
      <div style="display: flex; align-items: flex-start; gap: 10px;">
        <img
            src="../../public/ai.png"
            alt="AI图标"
            style="width: 40px; height: 40px; margin-right: 10px; vertical-align: middle;"
        />
        <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 5 }"
            v-model="typedText"
            placeholder="企业反担保、执转破等智能分析结果展现"
            style="flex: 1; margin: 0; font-size: 12px;"
        ></el-input>
      </div>
    </div>

    <!-- 主体内容区：三栏布局 -->
    <div style="display: flex; gap: 15px; margin-top: 15px;">
      <!-- 左侧：信用打分 + 关联人 + 维度分析图表 -->
      <div
          style="flex: 2; background: white; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 12px; overflow-y: auto; max-height: 600px;"
      >
        <!-- 名下资产状况（上移） -->
        <div style="margin-bottom: 15px;">
          <h3 style="margin: 0 0 12px 0; color: #333; font-size: 14px;">名下资产状况</h3>
          <div ref="pieChart" style="width: 100%; height: 180px;"></div>
        </div>

        <!-- 企业信用评估打分、履行能力打分 -->
        <div
            style="margin-bottom: 15px; background: #f8f9fa; border-radius: 8px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
        >
          <div style="display: flex; gap: 15px;">
            <!-- 信用评估打分 -->
            <div style="flex: 1; text-align: center;">
              <div style="font-size: 20px; font-weight: bold; color: #0066cc;">{{ creditScore || '暂无数据' }}</div>
              <div style="color: #666; margin: 4px 0;">企业信用评估</div>
              <div
                  style="width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; margin-top: 6px;"
              >
                <div
                    :style="{
                    height: '100%',
                    background: 'linear-gradient(to right, #4CAF50, #FFC107, #F44336)',
                    width: creditScore ? `${creditScore}%` : '0%',
                    transition: 'width 0.5s ease'
                  }"
                ></div>
              </div>
              <div style="color: #333; font-size: 10px; margin-top: 4px;">
                {{ getCreditLevel(creditScore) }}
              </div>
            </div>

            <!-- 履行能力打分 -->
            <div style="flex: 1; text-align: center;">
              <div style="font-size: 20px; font-weight: bold; color: #0066cc;">{{ performanceScore || '暂无数据' }}</div>
              <div style="color: #666; margin: 4px 0;">履行能力评估</div>
              <div
                  style="width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; margin-top: 6px;"
              >
                <div
                    :style="{
                    height: '100%',
                    background: 'linear-gradient(to right, #4CAF50, #FFC107, #F44336)',
                    width: performanceScore ? `${performanceScore}%` : '0%',
                    transition: 'width 0.5s ease'
                  }"
                ></div>
              </div>
              <div style="color: #333; font-size: 10px; margin-top: 4px;">
                {{ getPerformanceLevel(performanceScore) }}
              </div>
            </div>
          </div>
        </div>

        <!-- 企业关联人信息 -->
        <div style="padding: 8px; border-top: 1px solid #eee;">
          <h4 style="margin: 0 0 6px 0; color: #333; font-size: 14px;">企业关联人</h4>
          <el-table :data="relatedPeople" border stripe style="width: 100%; font-size: 12px;">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="role" label="角色"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </div>

        <!-- 各维度详细分析图表 -->
        <div style="padding: 8px; border-top: 1px solid #eee; margin-top: 10px;">
          <h4 style="margin: 0 0 12px 0; color: #333; font-size: 14px;">各维度详细分析</h4>

          <!-- 图表网格 -->
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
            <!-- 经营状况图表 -->
            <div style="border: 1px solid #eee; border-radius: 6px; padding: 8px;">
              <div style="font-weight: bold; color: #409eff; text-align: center; margin-bottom: 8px; font-size: 12px;">
                经营状况
              </div>
              <div ref="operationChart" style="width: 100%; height: 120px;"></div>
              <div style="font-size: 10px; color: #666; margin-top: 5px;">
                <p style="margin: 2px 0;">社保参保：{{ company?.socialSecurityCount || '暂无数据' }} 次</p>
                <p style="margin: 2px 0;">居民缴费：{{ company?.residentialPaymentCount || '暂无数据' }} 次</p>
              </div>
            </div>

            <!-- 价值维度图表 -->
            <div style="border: 1px solid #eee; border-radius: 6px; padding: 8px;">
              <div style="font-weight: bold; color: #67c23a; text-align: center; margin-bottom: 8px; font-size: 12px;">
                价值维度
              </div>
              <div ref="valueChart" style="width: 100%; height: 120px;"></div>
              <div style="font-size: 10px; color: #666; margin-top: 5px;">
                <p style="margin: 2px 0;">综合估值：{{ company?.valuation || '暂无数据' }}</p>
                <p style="margin: 2px 0;">流动性：{{ company?.liquidity || '暂无数据' }}</p>
              </div>
            </div>
          </div>

          <!-- 雷达图 -->
          <div style="margin-top: 20px;">
            <div ref="radarChart" style="width: 100%; height: 240px;"></div>
          </div>
        </div>
      </div>

      <!-- 右侧：各个维度分析 -->
      <div
          style="flex: 1; background: white; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 12px; overflow-y: auto; max-height: 600px;"
      >
        <!-- 各个维度分析 -->
        <div style="padding: 8px; border-top: 1px solid #eee;">
          <h4 style="margin: 0 0 6px 0; color: #333; font-size: 14px;">各个维度分析</h4>
          <div style="display: grid; grid-template-columns: 1fr; gap: 16px;">
            <!-- 资产状况 -->
            <div style="background: #f0f8ff; padding: 12px; border-radius: 6px; border-left: 4px solid #0066cc;">
              <div style="font-weight: bold; color: #0066cc; font-size: 12px;">资产状况</div>
              <p style="margin: 6px 0; color: #666; font-size: 10px;">房产：{{ company?.propertyCount || '暂无数据' }} 处，已查封
                {{ company?.sealedPropertyCount || '暂无数据' }} 处</p>
              <p style="margin: 6px 0; color: #666; font-size: 10px;">资金：{{ company?.bankDeposit || '暂无数据' }}</p>
              <p style="margin: 6px 0; color: #666; font-size: 10px;">车辆：{{ company?.vehicle || '暂无数据' }}</p>
            </div>

            <!-- 经营状况 -->
            <div style="background: #f8f9fa; padding: 12px; border-radius: 6px; border-left: 4px solid #409eff;">
              <div style="font-weight: bold; color: #409eff; font-size: 12px;">经营状况</div>
              <p style="margin: 6px 0; color: #666; font-size: 10px;">社保参保：{{ company?.socialSecurityCount || '暂无数据' }}
                次</p>
              <p style="margin: 6px 0; color: #666; font-size: 10px;">居民缴费：{{
                  company?.residentialPaymentCount || '暂无数据'
                }} 次</p>
            </div>

            <!-- 价值维度 -->
            <div style="background: #f0f8ff; padding: 12px; border-radius: 6px; border-left: 4px solid #67c23a;">
              <div style="font-weight: bold; color: #67c23a; font-size: 12px;">价值维度</div>
              <p style="margin: 6px 0; color: #666; font-size: 10px;">综合估值：{{ company?.valuation || '暂无数据' }}</p>
              <p style="margin: 6px 0; color: #666; font-size: 10px;">流动性：{{ company?.liquidity || '暂无数据' }}</p>
            </div>

            <!-- 合规维度 -->
            <div style="background: #f8f9fa; padding: 12px; border-radius: 6px; border-left: 4px solid #e6a23c;">
              <div style="font-weight: bold; color: #e6a23c; font-size: 12px;">合规维度</div>
              <p style="margin: 6px 0; color: #666; font-size: 10px;">违法记录：{{ company?.legalIssues || '暂无数据' }}</p>
              <p style="margin: 6px 0; color: #666; font-size: 10px;">注册状态：{{ company?.registrationStatus || '暂无数据' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getCompanyData} from "@/mock/mock.js";
import * as echarts from 'echarts';

export default {
  name: "CompanySearch",
  data() {
    return {
      search: {
        name: "",
        phone: ""
      },
      company: null,
      relatedPeople: [],
      assets: [],
      typedText: "", // AI智能分析结果文本
      creditScore: null, // 初始为 null，表示暂无数据
      performanceScore: null, // 初始为 null，表示暂无数据
      pieChart: null,
      radarChart: null,
      operationChart: null,
      valueChart: null
    };
  },
  mounted() {
    this.initCharts();
  },
  beforeDestroy() {
    if (this.pieChart) this.pieChart.dispose();
    if (this.radarChart) this.radarChart.dispose();
    if (this.operationChart) this.operationChart.dispose();
    if (this.valueChart) this.valueChart.dispose();
  },
  methods: {
    initCharts() {
      this.pieChart = echarts.init(this.$refs.pieChart);
      this.radarChart = echarts.init(this.$refs.radarChart);
      this.operationChart = echarts.init(this.$refs.operationChart);
      this.valueChart = echarts.init(this.$refs.valueChart);
    },

    updateCharts() {
      // 更新饼图
      if (this.pieChart) {
        const pieOption = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'middle'
          },
          series: [
            {
              name: '资产分布',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 500, name: '资金'},
                {value: 600, name: '房产'},
                {value: 100, name: '车辆'}
              ]
            }
          ]
        };
        this.pieChart.setOption(pieOption);
      }

      // 更新经营状况图表
      if (this.operationChart) {
        const operationOption = {
          series: [{
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 4,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [[0.25, '#FF6E76'], [0.5, '#FDDD60'], [0.75, '#58D9F9'], [1, '#7CFFB2']]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '80%',
              width: 6,
              offsetCenter: [0, '-50%']
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: true,
              offsetCenter: [0, '20%'],
              fontSize: 14,
              formatter: '{value}'
            },
            title: {
              show: false
            },
            data: [{
              value: 70,
              name: '经营评分'
            }]
          }]
        };
        this.operationChart.setOption(operationOption);
      }

      // 更新价值维度图表
      if (this.valueChart) {
        const valueOption = {
          series: [{
            type: 'gauge',
            progress: {
              show: true,
              width: 12
            },
            axisLine: {
              lineStyle: {
                width: 12,
                color: [[1, '#67c23a']]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: true,
              offsetCenter: [0, '50%'],
              fontSize: 14,
              formatter: '{value}'
            },
            title: {
              show: false
            },
            data: [{
              value: 85,
              name: '价值评分'
            }]
          }]
        };
        this.valueChart.setOption(valueOption);
      }

      // 更新雷达图
      if (this.radarChart) {
        const radarOption = {
          title: {
            text: '企业各维度评分',
            left: 'center',
            top: 0,
            textStyle: {
              fontSize: 14
            }
          },
          tooltip: {},
          radar: {
            indicator: [
              {name: '资产状况', max: 100},
              {name: '经营状况', max: 100},
              {name: '价值维度', max: 100},
              {name: '合规维度', max: 100}
            ],
            center: ['50%', '55%'],
            radius: '65%'
          },
          series: [{
            name: '企业评估',
            type: 'radar',
            data: [
              {
                value: [80, 70, 85, 90],
                name: '企业评分',
                areaStyle: {
                  opacity: 0.3
                }
              }
            ]
          }]
        };
        this.radarChart.setOption(radarOption);
      }
    },

    // 获取信用等级
    getCreditLevel(score) {
      if (!score) return '暂无数据';
      if (score >= 80) return '优秀';
      if (score >= 70) return '良好';
      if (score >= 60) return '一般';
      if (score >= 50) return '较差';
      return '差';
    },

    // 获取履行能力等级
    getPerformanceLevel(score) {
      if (!score) return '暂无数据';
      if (score >= 80) return '强';
      if (score >= 70) return '较强';
      if (score >= 60) return '中等';
      if (score >= 50) return '较弱';
      return '弱';
    },

    load() {
      const company = getCompanyData(this.search.name, this.search.phone);

      if (company) {
        this.company = {
          creditCode: company.creditCode,
          caseCount: 1,
          propertyCount: 7,
          uniqueAddressCount: 7,
          sealedPropertyCount: 6,
          shipCount: 1,
          socialSecurityCount: 3,
          residentialPaymentCount: 3,
          predictedResidence: "海州区新南兴业",
          valuation: "约 1200万元",
          liquidity: "流动性强",
          legalIssues: "无重大违法记录",
          registrationStatus: "注册状态正常，未注销",
          bankDeposit: "银行存款 500万元",
          vehicle: "苏G·XXXXX 小型轿车"
        };

        this.relatedPeople = [
          {name: "卢明立", role: "法定代表人", phone: "13800138000", address: "连云港市海州区"},
          {name: "吴忆玲", role: "股东", phone: "13900139000", address: "连云港市连云区"}
        ];

        this.assets = [
          {type: "资金", value: "银行存款 500万元"},
          {type: "房产", value: "东海县白塔镇市县东路33号名人家园22-101"},
          {type: "车辆", value: "苏G·XXXXX 小型轿车"}
        ];

        this.creditScore = "85";
        this.performanceScore = "78";

        this.typedText = company.suggestion || "该公司具备良好的经营条件和资信状况，可以考虑采取反担保灵活保全等执行措施。";

        // 更新图表
        this.$nextTick(() => {
          this.updateCharts();
        });
      } else {
        this.company = null;
        this.relatedPeople = [];
        this.assets = [];
        this.creditScore = null;
        this.performanceScore = null;
        this.typedText = "未查询到相关企业信息，请检查输入的企业名称或统一信用代码是否正确。";
      }
    }
  }
};
</script>

<style scoped>
.company-search {
  font-family: 'Microsoft YaHei', sans-serif;
}
</style>